<template>
  <div class="iframe-box">
    <iframe ref="iframeT"
      :key="uuid"
      class="iframe"
      :src="url"
      frameborder="0"></iframe>
  </div>
</template>

<script>
  export default {
    name: 'iframePage',
    props: {
      url: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        uuid: new Date().getTime()
      };
    },
    methods: {
      init() {
        this.stateChange();
      },
      stateChange() {
        const iframe = this.$refs.iframeT;
        // IE和非IE浏览器，监听iframe加载事件不一样，需要兼容
        const that = this;
        if (iframe.attachEvent) {
          // IE
          iframe.attachEvent('onload', () => {
            that.loading = false;
          });
        } else {
          // 非IE
          iframe.onload = function () {
            that.loading = false;
          };
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .iframe-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .iframe {
      height: 100%;
      width: 100%;
    }
  }
</style>